<template>
  <div style="height: 100%">
    <div class="top_div" style="">
      <div class="div_show">
          <div style="text-align: left">
            <el-row class="radio_div radio_top">
              <el-col :span='div_top_left'  class="radio_top_col">
                <el-image
                  style="height: 60px"
                  src="https://www.imooc.com/static/img/course/logo-course.png"
                  fit="fill"
                >
                </el-image>
              </el-col>
              <el-col :span='div_top_right' class="radio_top_col radio_top_col_select" >
                <el-input placeholder="请输入内容" v-model="key" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="getCourse"></el-button>
                </el-input>
              </el-col>
            </el-row>
            <el-divider style="margin: 12px 0px;"></el-divider>
            <el-row class="radio_div">
              <el-col :span="div_left" class="radio_div_left"><span>方向：</span></el-col>
              <el-col :span="div_right" class="radio_div_right">
                <el-radio-group v-model="directionId" size="small">
                  <el-radio-button
                    key="0"
                    label="0"
                    style="border: 0px">全部</el-radio-button>
                  <el-radio-button
                    style="border: 0px"
                    v-for="directionItem in directions"
                    :key="directionItem.directionId"
                    :label="directionItem.directionId">
                    {{directionItem.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-divider style="margin: 12px 0px;"></el-divider>
            <el-row class="radio_div">
              <el-col :span="div_left" class="radio_div_left"><span>分类：</span></el-col>
              <el-col :span="div_right" class="radio_div_right">
                <el-radio-group v-model="sortId" size="small">
                  <el-radio-button label="0">全部</el-radio-button>
                  <el-radio-button
                    v-for="sortItem in sorts"
                    :key="sortItem.sortId"
                    :label="sortItem.sortId">
                    {{sortItem.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-divider ></el-divider>
            <el-row class="radio_div" style="padding-bottom: 12px">
              <el-col :span="div_left" class="radio_div_left"><span>难度：</span></el-col>
              <el-col :span="div_right" class="radio_div_right">
                <el-radio-group v-model="difficulty" size="small">
                  <el-radio-button
                    v-for="diffItem in difficultys"
                    :key="diffItem.difficulty"
                    :label="diffItem.difficulty">
                    {{diffItem.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-col>
            </el-row>
          </div>
        </div>
    </div>
    <div style="background: #f3f5f7;height: 100%">
      <div class="div_show class_show">
        <el-row>
          <el-col class="course_div" :span="div_class" v-for="(courseItem,index) in courses" :key="index">
            <div>
              <div class="course_image" @click="toDetail(courseItem.courseId)">
                <el-image
                  style=" border-radius: 5px;height: 100%;width: 100%"
                  :src="courseItem.imageUrl"
                  fit="fill"></el-image>
              </div>
              <div class="course_title course_margin">
                <span @click="toDetail(courseItem.courseId)">{{courseItem.title}}</span>
              </div>
              <div class="course_basic course_margin" style="text-align: left">
                <span class=" course_diff">入门</span>
                <span class=" course_people">
                  <i class="el-icon-user"></i>
                  {{courseItem.number}}
                </span>
              </div>
              <div class="course_detail course_margin" style="text-align: left">
                <span>{{courseItem.hotWord}}</span>
              </div>
              <div class="course_option course_margin" style="">
                <span class="course_left">
                  免费
                </span>
                <span class="course_right star_div" @click="saveFavorite(courseItem.courseId)">
                  <i class="el-icon-star-off">
                  收藏</i>
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'ChooseClass',
  data () {
    return {
      directionId: 0,
      sortId: 0,
      difficulty: 0,
      key: '',
      directions: [
      ],
      sorts: [
      ],
      courses: [],
      difficultys: [
        {
          difficulty: 0,
          name: '全部'
        },
        {
          difficulty: 1,
          name: '入门'
        },

        {
          difficulty: 2,
          name: '初级'
        },
        {
          difficulty: 3,
          name: '中级'
        },
        {
          difficulty: 4,
          name: '高级'
        }
      ],
      div_left: 1,
      div_right: 23,
      div_top_left: 4,
      div_top_right: 20,
      div_class: 4
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getAllDirection()
    this.getAllSort()
    this.getCourse()
  },
  watch: {
    'directionId': function (newValue) {
      // eslint-disable-next-line eqeqeq
      if (newValue != 0) {
        this.getSortByDirectionId()
      }
      // eslint-disable-next-line eqeqeq
      if (newValue == 0) {
        this.getAllSort()
        this.sortId = 0
      }
      this.directionId = newValue
      this.key = null
      this.getCourse()
    },
    'sortId': function (newValue) {
      // eslint-disable-next-line eqeqeq
      if (newValue != 0) {
        this.getDirectionBySortId()
      }
      this.sortId = newValue
      this.key = null
      this.getCourse()
    }
  },
  methods: {
    saveFavorite (courseId) {
      var _this = this
      this.$axios.post('/api/favorite/add',
        this.$qs.stringify({
          favoriteData: JSON.stringify({
            courseId: courseId,
            userId: this.user.userId
          })
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.$message({
              type: 'success',
              message: '成功'
            })
          } else {
            _this.$message({
              type: 'error',
              message: '失败'
            })
          }
        })
    },
    toDetail (courseId) {
      // 课程详情
      this.$router.push(
        {path: '/learn',
          query: {
            courseId: courseId
          }
        }
      )
    },
    getAllDirection () {
      var _this = this
      this.$axios.post('/api/direction/getAllDirection',
        this.$qs.stringify({
          directionId: this.directionId
        }))
        .then(function (response) {
          var data = response.data
          if (data) {
            _this.directions = _this.$qs.parse(data.result)
          }
        })
    },
    getAllSort () {
      var _this = this
      this.$axios.post('/api/sort/getAllSort')
        .then(function (response) {
          var data = response.data
          if (data) {
            _this.sorts = _this.$qs.parse(data.result)
          }
        })
    },
    getCourse () {
      var _this = this
      var courseData = {
        directionId: this.directionId,
        sortId: this.sortId,
        difficulty: this.difficulty,
        key: this.key
      }
      let data = JSON.stringify(courseData)
      this.$axios.post('/api/course/getCourse',
        this.$qs.stringify({
          courseData: data
        }))
        .then(function (response) {
          var data = response.data
          if (data) {
            _this.courses = _this.$qs.parse(data.result)
          }
        })
    },
    getSortByDirectionId () {
      var _this = this
      this.$axios.post('/api/sort/getSortByDirection',
        this.$qs.stringify({
          directionId: this.directionId
        }))
        .then(function (response) {
          var data = response.data
          if (data) {
            _this.sorts = _this.$qs.parse(data.result)
          }
        })
    },
    getDirectionBySortId () {
      var _this = this
      this.$axios.post('/api/direction/getDirectionBySort',
        this.$qs.stringify({
          sortId: this.sortId
        }))
        .then(function (response) {
          var data = response.data
          if (data) {
            _this.directionId = _this.$qs.parse(data.result).directionId
          }
        })
    },
    selectCourse () {
    }
  }
}
</script>

<style >
  .div_show{
    padding: 0px 15%;
  }
  .class_show {
    padding: 12px 15%;
    min-height: 500px;
  }
  .top_div{
    -webkit-box-shadow:0 4px 8px 0 rgba(28,31,33,.1);
    -moz-box-shadow:0 4px 8px 0 rgba(28,31,33,.1);
    box-shadow:0 4px 8px 0 rgba(28,31,33,.1);
  }
  .el-radio-button:first-child .el-radio-button__inner{
    border-left: 0px;
    border-radius: 0px
  }
  .el-radio-button:last-child .el-radio-button__inner{
    border-right: 0px;
    border-radius: 0px
  }
  .el-radio-button__inner{
    border: 0px;
  }
  .div_show .el-divider--horizontal{
    margin: 12px 0px;
  }
  .radio_div{
    width: 100%;
    height: auto;
    display: block;
    vertical-align:top;  /*靠上对齐*/
  }
  .radio_top{
    height: 60px;
  }
  .radio_top_col{
    height: 60px;
    line-height: 60px;
    padding: 0px;
    margin: 0px;
  }
  .radio_top_col_select{
    text-align: right;
  }
  .radio_div_left,.radio_div_right{
    display: inline-block;
  }
  .radio_div_left{
    height: 30px;
    line-height: 30px;
  }
  .radio_div_left span{
    font-size: 12px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
  }
  .radio_div_right{
  }
 .class_show .course_div {
    padding: 0px 15px 5px 15px;

    color: #505458;
  }
 .class_show .course_div .course_image{
   height: 112px;
   width: 192px;
   cursor: pointer;
 }
  .class_show .course_title{
    text-align: left;
    height: 40px;
    overflow: hidden;
    color: #000000;
    cursor: pointer;
  }
  .course_left{
    float: left;
  }
  .course_right{
    float: right;
  }
  .course_diff {
    margin-right: 5px;
  }
  .class_show .course_detail {
    text-overflow: clip;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //行数需设置
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .course_margin{
    margin: 7px 0px;
  }
  .course_margin span{
    font-size: 14px;
  }
  .course_title span{
    font-weight: bolder;
    font-size: 16px;
    font-family: 微软雅黑;
  }
  .input-with-select{
    width: 500px;
  }
  .star_div{
    cursor: pointer;
  }
</style>
